<template>
    <div class="customer-page">
        <main>
            <!-- 用来放置所有的聊天记录（我自己的和对面的两个人的聊天记录） -->
            <div class="list-box" ref="listBox">
                <!-- 每条聊天记录都要有头像、时间、聊天的文本或者图片或者视频 -->
                <div class="list" v-for="item in list" :key="item.id">
                    <!-- list-item1当做是我自己   list-item2是对面的人 -->
                    <p class="time">{{ new Date(item.time).toLocaleString() }}</p>
                    <!-- item.dir 值为1时表示自己  2时是对面客服 -->
                    <div :class="[item.dir == 1 ? 'list-item1' : 'list-item2']">
                        <!-- 头像 -->
                        <img class="head-img" :src="item.dir == 1 ? item.user_avatar : item.server_avatar" alt="">
                        <!-- 放置聊天记录、图片、视频 -->
                        <!-- 通过type进行判断  值是text表示文本  值是image表示图片  只是video表示视频 -->
                        <div class="msg-box">
                            <p class="msg-text" v-if="item.type == 'text'">{{ stringToEmoji(item.message) }}</p>
                            <!-- 图片要支持预览功能 -->
                            <el-image v-if="item.type == 'image'" :src="item.message" :zoom-rate="1.2" :max-scale="7"
                                :min-scale="0.2" :preview-src-list="[item.message]" :initial-index="4" fit="cover" />
                            <!-- 视频 -->
                            <video class="video-div" v-if="item.type == 'video'" :src="item.message" controls></video>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="emoji-box" v-show="emojiFlag">
                <ul>
                    <li @click="handleChoseEmoji(item)" v-for="item in emojiList" :key="item.rule">{{ item.content }}
                    </li>
                </ul>
            </div>
            <div class="f-top">
                <span @click="emojiFlag = !emojiFlag">😊</span>
                <el-icon @click="handleIcon">
                    <FolderOpened />
                </el-icon>
                <!-- 选择文件上传 -->
                <input type="file" name="" id="" ref="fileUpload" class="fileupload" @change="handleFileUpload">
            </div>
            <el-input v-model="textarea" :rows="5" type="textarea" placeholder="Please input" />
            <el-button type="primary" class="send-btn" @click="handleSend">发送</el-button>
        </footer>
    </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { emojiList, stringToEmoji, emojiToString } from './emoji';
import OSS from 'ali-oss';

const emojiFlag = ref(false)
const textarea = ref('')
const listBox = ref(null)
const fileUpload = ref(null)
// 定义一个空数组，用来存储线上的聊天记录数据
const list = ref([])

// 后端地址   自己是user_id=2    客服是server_id
const socket = new WebSocket("ws://124.221.74.149:8003/koa/ws?user_id=2&server_id=1");

// 建立连接
socket.addEventListener("open", function (event) {
    // 告诉后端获取到所有的聊天记录
    // 转字符串  JSON.stringify()
    socket.send(JSON.stringify({ type: 'getChatList' }));
    heartBeatInterval()
});

// 接收数据
socket.addEventListener("message", function (event) {
    // 字符串转数组/对象 JSON.parse()
    const data = JSON.parse(event.data) // 数组
    console.log("Message from server ", data);

    // 区分是获取数据还是新增数据
    if (data.type == 'getChatList') {
        list.value = data.data
    } else {
        list.value.push(data.data)
    }

    return nextTick(() => {
        listBox.value.scrollTop = 1000000
    })
});

// 发送
const handleSend = () => {
    socket.send(JSON.stringify({
        // 新增聊天记录
        type: 'addMessage',
        data: {
            user_id: 2,
            server_id: 1,
            type: 'text',
            message: emojiToString(textarea.value)
        }
    }))
    // 清空输入框的值
    textarea.value = ''
}

// 选择表情包  把选择的表情包放进文本域，关闭表情包的弹框
const handleChoseEmoji = (item) => {
    textarea.value += item.content
    emojiFlag.value = false
}

// 点击文件的icon
const handleIcon = () => {
    // 打开选择本地文件弹框
    fileUpload.value.click()
}

// 为上传阿里云做配置
const client = new OSS({
    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
    region: "oss-cn-beijing",
    authorizationV4: true,
    // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
    accessKeyId: "LTAI5tEx8SE1XeQTz5Zafp8b",
    accessKeySecret: "ifcwNxjlOhEKMvxRrw61yxD0s72FxA",
    // 填写Bucket名称。
    bucket: "2209a-test",
});

// 选择文件上传事件
const handleFileUpload = async (e) => {
    // 上传文件的基本信息
    const file = e.target.files[0]
    console.log(file);
    // 上传阿里云
    const result = await client.put(file.name, file);

    socket.send(JSON.stringify({
        type: 'addMessage',
        data: {
            user_id: 2,
            server_id: 1,
            type: file.type == 'video/mp4' ? 'video' : 'image',
            message: result.url
        }
    }))
}

// 心跳检测
const heartBeatInterval = () =>{
    setInterval(()=>{
        socket.send('heartbeat')
    }, 30000)
}

</script>

<!-- 
    1、排版
    2、通过webSocket建立链接
    3、获取数据
    4、渲染数据
    5、发送
    6、表情包的转换
    7、滚动条仔最底部

-->

<style scoped lang="scss">
.customer-page {
    height: 85vh;

    main {
        height: 60vh;

        .list-box {
            height: 60vh;
            overflow-y: scroll;

            .list {

                .time {
                    text-align: center;
                    line-height: 30px;
                    font-size: 14px;
                    color: #9c9a9a
                }

                .list-item1,
                .list-item2 {
                    display: flex;

                    .head-img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                    }

                    .msg-box {

                        .msg-text {
                            background-color: #eee;
                            padding: 8px 10px;
                            border-radius: 8px;
                            margin: 0px 10px;
                        }

                        .el-image {
                            width: 150px;
                            height: 150px;
                            border-radius: 8px;
                        }

                        .video-div {
                            width: 150px;
                            height: 150px;
                        }
                    }
                }

                .list-item1 {
                    flex-direction: row-reverse;

                    .msg-box {

                        .msg-text {
                            background-color: rgb(24, 131, 238);
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    footer {
        position: relative;
        height: 25vh;
        border-top: 1px solid #ccc;

        .emoji-box {
            position: absolute;
            left: 0;
            top: -150px;
            width: 200px;
            height: 150px;
            background-color: pink;

            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    padding: 10px;
                }
            }
        }

        .f-top {
            height: 40px;
            display: flex;
            align-items: center;

            .el-icon {
                font-size: 20px;
                margin: 0px 10px;
            }

            .fileupload {
                display: none;
            }
        }

        .send-btn {
            position: absolute;
            right: 30px;
            bottom: 0;
        }
    }
}
</style>